<template>
  <div>
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="mycity" />

      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="(item, index) in hot"
        :key="index"
        :title="item.label"
        @click="tzcj(item.label)"
      />

      <div v-for="(item, index) in obj" :key="index">
        <van-index-anchor :index="index">{{ index }}</van-index-anchor>
        <van-cell
          v-for="(ct, index) in item"
          :key="index * 100"
          :title="ct.label"
        />
      </div>

      ...
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, setCity } from '@/utils/storage'
import { THcity } from '@/utils/method'
import { allCity, hotCity } from '@/api/ariticle'
export default {
  name: 'My-city',
  async created() {
    const {
      data: { body }
    } = await allCity({ level: 1 })
    const {
      data: { body: hot }
    } = await hotCity()
    console.log(hot)
    this.hot = hot
    this.list = body
    console.log(this.list)
    THcity(this.obj, body)
  },
  data() {
    return {
      mycity: getCity(),
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'G',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      hot: [],
      list: [],
      obj: {
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        I: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        U: [],
        V: [],
        W: [],
        X: [],
        Y: [],
        Z: []
      }
    }
  },
  methods: {
    tzcj(cs) {
      setCity(cs)
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-index-bar__index {
  display: block;
  margin: 0px 10px 0px 0px;
  padding-left: 7px;
  padding-top: 2px;
  text-align: center;
  width: 20px;
  height: 20px;
}
::v-deep .van-index-bar__index--active {
  background: rgb(23, 160, 10);
  color: rgb(255, 255, 255) !important;
  border-radius: 50%;
}
</style>
